<template>
	<view class="message-container">
		<!-- 顶部消息类型切换 -->
		<view class="tab-header">
			<view 
				v-for="(tab, index) in tabs" 
				:key="index"
				class="tab-item"
				:class="{ active: currentTab === index }"
				@click="switchTab(index)"
			>
				<text>{{ tab.name }}</text>
				<view class="badge" v-if="tab.unread > 0">{{ tab.unread }}</view>
			</view>
		</view>

		<!-- 消息列表 -->
		<z-paging ref="paging" v-model="messageList" @query="queryMessageList">
			<template v-if="messageList.length > 0">
				<view class="message-list">
					<view 
						class="message-item"
						v-for="(item, index) in messageList"
						:key="index"
						@click="handleMessageClick(item)"
					>
						<!-- 左侧头像/图标 -->
						<view class="avatar">
							<image 
								v-if="item.avatar" 
								:src="item.avatar" 
								mode="aspectFill"
							></image>
							<uni-icons 
								v-else 
								:type="getMessageIcon(item.type)" 
								size="40" 
								color="#007AFF"
							></uni-icons>
						</view>
						
						<!-- 中间内容区 -->
						<view class="content">
							<view class="title">
								<text>{{ item.title }}</text>
								<view class="unread" v-if="!item.isRead"></view>
							</view>
							<text class="desc">{{ item.content }}</text>
						</view>
						
						<!-- 右侧时间 -->
						<view class="right">
							<text class="time">{{ formatTime(item.time) }}</text>
							<uni-icons 
								v-if="item.type !== 'system'" 
								type="right" 
								size="14" 
								color="#999"
							></uni-icons>
						</view>
					</view>
				</view>
			</template>
			
			<!-- 空状态 -->
			<view v-else class="empty-state">
				<image src="/static/img/empty-message.png" mode="aspectFit"></image>
				<text>暂无消息</text>
			</view>
		</z-paging>
	</view>
</template>

<script>
export default {
	data() {
		return {
			currentTab: 0,
			tabs: [
				{ name: '全部', unread: 5 },
				{ name: '评论', unread: 2 },
				{ name: '点赞', unread: 3 },
				{ name: '系统', unread: 0 }
			],
			messageList: []
		}
	},
	
	methods: {
		// 切换消息类型
		switchTab(index) {
			if (this.currentTab === index) return
			this.currentTab = index
			this.$refs.paging.reload()
		},
		
		// 获取消息列表
		queryMessageList(pageNo, pageSize) {
			// 模拟消息数据
			setTimeout(() => {
				const messages = this.getMockMessages(pageNo, pageSize)
				this.$refs.paging.complete(messages)
			}, 1000)
		},
		
		// 处理消息点击
		handleMessageClick(item) {
			if (!item.isRead) {
				this.markAsRead(item)
			}

			// 根据消息类型跳转到不同页面
			switch(item.type) {
				case 'comment':
					// 跳转到评论详情页
					uni.navigateTo({
						url: `/pages/tabbar/tabbar-message/chat-detail?title=评论消息&content=${item.content}&time=${item.time}`
					})
					break
				case 'like':
					// 跳转到链接详情页
					uni.navigateTo({
						url: `/pages/tabbar/tabbar-message/chat-detail?title=连接消息&content=${item.content}&time=${item.time}`
					})
					break
				case 'system':
					// 跳转到系统消息详情页
					uni.navigateTo({
						url: `/pages/tabbar/tabbar-message/chat-detail?title=系统消息&content=${item.content}&time=${item.time}`
					})
					break
				case 'private':
					// 跳转到私信消息详情页
					uni.navigateTo({
						url: `/pages/tabbar/tabbar-message/chat-detail?title=私信消息&content=${item.content}&time=${item.time}`
					})
					break
				default:
					break
			}
		},
		
		// 标记消息为已读
		markAsRead(item) {
			item.isRead = true
			// TODO: 调用接口更新消息状态
		},
		
		// 获取消息图标
		getMessageIcon(type) {
			switch(type) {
				case 'comment': return 'chat'
				case 'like': return 'heart'
				case 'system': return 'notification'
				default: return 'notification'
			}
		},
		
		// 格式化时间
		formatTime(timestamp) {
			const now = new Date().getTime()
			const diff = now - timestamp
			
			// 小于1分钟
			if (diff < 60000) {
				return '刚刚'
			}
			// 小于1小时
			if (diff < 3600000) {
				return `${Math.floor(diff / 60000)}分钟前`
			}
			// 小于24小时
			if (diff < 86400000) {
				return `${Math.floor(diff / 3600000)}小时前`
			}
			// 大于24小时
			const date = new Date(timestamp)
			return `${date.getMonth() + 1}-${date.getDate()}`
		},
		
		// 模拟消息数据
		getMockMessages(pageNo, pageSize) {
			const messages = []
			const types = ['comment', 'like', 'system', 'private']
			const now = new Date().getTime()
			
			for (let i = 0; i < pageSize; i++) {
				const type = types[Math.floor(Math.random() * types.length)]
				messages.push({
					id: `${pageNo}-${i}`,
					type,
					title: type === 'comment' ? '收到新评论' : type === 'like' ? '收到新点赞' : type === 'private' ? '私信消息' : '系统通知',
					content: type === 'comment' ? 
						'用户xxx评论了你的作品' : 
						type === 'like' ? 
						'用户xxx点赞了你的作品' : 
						type === 'private' ? 
						'你有一条新的私信' : 
						'您的账号信息已更新',
					time: now - Math.floor(Math.random() * 86400000),
					isRead: Math.random() > 0.5,
					avatar: type !== 'system' ? '/static/avatar.png' : '',
					targetId: `target-${pageNo}-${i}`
				})
			}
			
			return messages
		}
	}
}
</script>

<style lang="scss">
.message-container {
	min-height: 100vh;
	background-color: #f8f8f8;
	
	.tab-header {
		display: flex;
		background-color: #fff;
		padding: 20rpx 0;
		position: sticky;
		top: 0;
		z-index: 100;
		
		.tab-item {
			flex: 1;
			text-align: center;
			position: relative;
			
			text {
				font-size: 28rpx;
				color: #666;
				padding: 20rpx 0;
			}
			
			&.active {
				text {
					color: #007AFF;
					font-weight: bold;
				}
				
				&::after {
					content: '';
					position: absolute;
					bottom: -10rpx;
					left: 50%;
					transform: translateX(-50%);
					width: 40rpx;
					height: 4rpx;
					background-color: #007AFF;
					border-radius: 2rpx;
				}
			}
			
			.badge {
				position: absolute;
				top: -6rpx;
				right: 50%;
				transform: translateX(20rpx);
				background-color: #ff4d4f;
				color: #fff;
				font-size: 20rpx;
				padding: 0 10rpx;
				border-radius: 20rpx;
				min-width: 32rpx;
				height: 32rpx;
				line-height: 32rpx;
			}
		}
	}
	
	.message-list {
		.message-item {
			display: flex;
			align-items: center;
			padding: 30rpx;
			background-color: #fff;
			border-bottom: 1rpx solid #eee;
			
			.avatar {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				overflow: hidden;
				margin-right: 20rpx;
				
				image {
					width: 100%;
					height: 100%;
				}
			}
			
			.content {
				flex: 1;
				margin-right: 20rpx;
				
				.title {
					display: flex;
					align-items: center;
					margin-bottom: 10rpx;
					
					text {
						font-size: 28rpx;
						color: #333;
						font-weight: bold;
					}
					
					.unread {
						width: 16rpx;
						height: 16rpx;
						border-radius: 50%;
						background-color: #ff4d4f;
						margin-left: 10rpx;
					}
				}
				
				.desc {
					font-size: 24rpx;
					color: #999;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
			
			.right {
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				
				.time {
					font-size: 24rpx;
					color: #999;
					margin-bottom: 10rpx;
				}
			}
		}
	}
	
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 0;
		
		image {
			width: 200rpx;
			height: 200rpx;
			margin-bottom: 20rpx;
		}
		
		text {
			font-size: 28rpx;
			color: #999;
		}
	}
}
</style>
